<template>
	<view class="myInfoContainer">
		<!-- 个人资料信息页面开始 -->
		<view class="myInfoCard">
			<view class="avatar">
				<image :src="avatar" mode=""></image>
			</view>
			<view class="userInfo">
				<view class="userName">
					<text>{{userName}}</text>
				</view>
				<view class="userGrade">
					<text>所在年级：{{clssId}}</text>
				</view>
			</view>
			<view class="userOption">
				<view class="tag" @click="toSetting">
					<text>设置</text>
				</view>
				<view class="hz">
					<text>获赞{{counselor}}</text>
				</view>
			</view>
		</view>
		<!-- 个人资料信息页面结束 -->
		<!-- 信息数量页面开始 -->
		<view class="infoContainer">
			<view class="infoItem" @click="toMyLog">
				<text class="infoNum">
					0
				</text>
				<text class="infoName">
					<text>日记</text>
				</text>
			</view>
			<view class="infoItem" @click="toMyFollow">
				<text class="infoNum">
					0
				</text>
				<text class="infoName">
					<text>关注</text>
				</text>
			</view>
			<view class="infoItem" @click="toMyFollowed">
				<text class="infoNum">
					0
				</text>
				<text class="infoName">
					<text>被关注</text>
				</text>
			</view>
		</view>
		<!-- 信息数量页面结束 -->
		<!-- 主体内容区域开始 -->
		<view class="mainBoxs">
			<commonBox :src="jobImg" :title="jobTitle" :optionName="jobName">
				<view class="jobContent">
					<u-tag class="tags" :key="index" v-for="(item,index) in tagData" color="#fff" :text="item.text" mode="plain"
						shape="circle" bg-color="#2A6CAB" />
				</view>
			</commonBox>
			<!-- 间隔槽 -->
			<u-gap height="10" bg-color="#ccc"></u-gap>
			<!-- 成绩动态区域开始 -->
			<commonBox :src="cjImg" :title="cjTitle" :optionName="cjName">
				<view class="charts-box">
					<qiun-data-charts type="line" :chartData="chartData" background="none" />
				</view>
			</commonBox>
			<!-- 间隔槽 -->
			<u-gap height="10" bg-color="#ccc"></u-gap>
			<!-- 成绩动态区域结束 -->
			<!-- 学习心得区域开始 -->
			<commonBox :src="xxImg" :title="xxTitle" :optionName="xxName">
				<commonContent></commonContent>
			</commonBox>
			<u-gap height="10" bg-color="#ccc"></u-gap>
			<!-- 学习心得区域结束 -->
			<!-- 家长心得区域开始 -->
			<commonBox :src="xxImg" :title="jzTitle" :optionName="xxName">
				<commonContent></commonContent>
			</commonBox>
			<u-gap height="10" bg-color="#ccc"></u-gap>
			<!-- 家长心得区域结束 -->
			<!-- 专家点评区域开始 -->
			<commonBox :src="zjImg" :title="zjTitle" :optionName="zjName" :show="true">
				<commonContent></commonContent>
			</commonBox>
			<u-gap height="10" bg-color="#ccc"></u-gap>
			<!-- 专家点评区域结束 -->
			<!-- 行动历史区域开始 -->
			<commonBox :src="xdImg" :title="xdTitle" :optionName="xxName">
				<view class="xdContent">
					<u-table class="xdTable">
						<u-tr>
							<u-th>2021-12-30</u-th>
							<u-th>完成测评</u-th>
						</u-tr>
						<u-tr>
							<u-td>2021-12-31</u-td>
							<u-td>完成生涯规划解读</u-td>
						</u-tr>
						<u-tr>
							<u-td>2022-12-14</u-td>
							<u-td>完成研学</u-td>
						</u-tr>
					</u-table>
				</view>
			</commonBox>
			<!-- 行动历史区域结束 -->
		</view>
		<!-- 主体内容区域结束 -->
	</view>
</template>

<script>
	import {
		request
	} from "../../../util/api";
	import {
		TOAST
	} from "../../../util/util";
	import commonBox from "../../../components/commonBox"
	import commonContent from "../../../components/commonContent.vue"
	export default {
		components: {
			commonBox,
			commonContent
		},
		data() {
			return {
				// 用户信息
				userName:'',
				avatar:"",
				classId:'',
				counselor:'',
				jzTitle: '家长心得',
				xdTitle: "行动历史",
				xdImg: "../../../static/jzqIcon/xingdong.png",
				zjImg: "../../../static/jzqIcon/zhuanjia.png",
				zjTitle: "专家点评",
				zjName: "更新",
				xxImg: "../../../static/jzqIcon/xuexi.png",
				xxTitle: "学习心得",
				xxName: "更新",
				// 图表数据
				chartData: {
					"categories": [
						"初一上",
						"初一下"
					],
					"series": [{
							"name": "语文",
							"data": [
								80,
								100
							]
						},
						{
							"name": "数学",
							"data": [
								90,
								100
							]
						},
						{
							"name": "英语",
							"data": [
								100,
								80
							]
						}
					]
				},
				cjImg: "../../../static/jzqIcon/chengji.png",
				cjTitle: "成绩动态",
				cjName: "更新",
				jobImg: "../../../static/jzqIcon/job.png",
				jobTitle: "目标职业",
				jobName: "编辑",
				tagData: [{
						text: "电子制图师"
					},
					{
						text: " 电子工程技术技术人员"
					},
					{
						text: "机电技术人员"
					},
					{
						text: "机电技术人员"
					}
				]
			};
		},
		onLoad() {
			this.getUserData()
			this.getData()
		},
		methods: {
			// 获取当前用户信息
			getUserData(){
				request({
					url:"/system/CompassDiary/getHeadDiary",
					method:"get",
				}).then(res=>{
					const userData=res.data.compassNormalUser
					this.userName=userData.userName
					this.avatar=userData.avatar
					this.counselor=userData.counselor
					this.classId=userData.classId
					console.log(res.data)
				})
			},
			getData(){
				request({
					url:"/system/attention/280",
					method:"get"
				}).then(res=>{
					console.log(res)
				})
			},
			toMyLog() {
				uni.navigateTo({
					url: "/pages/ischoolQZ/myLog/myLog"
				})
			},
			// 跳转到我的关注页面
			toMyFollow() {
				uni.navigateTo({
					url: "/pages/ischoolQZ/myFollow/myFollow"
				})
			},
			// 跳转到被关注页面
			toMyFollowed() {
				uni.navigateTo({
					url: "/pages/ischoolQZ/myFollowed/myFollowed"
				})
			},
			// 跳转到个人设置页面
			toSetting(){
				uni.navigateTo({
					url: "/pages/ischoolQZ/personalsettings/personalsettings"
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.myInfoContainer {
		.myInfoCard {
			height: 260rpx;
			padding: 32rpx;
			background-image: url("../../../static/jzqImgs/headerBg.png");
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.avatar {
				flex: 1;

				image {
					width: 180rpx;
					height: 180rpx;
				}
				margin-right: 10rpx;
			}

			.userInfo {
				flex: 3;

				.userName {
					font-size: 40rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.userGrade {
					font-weight: bold;
				}
			}

			.userOption {
				display: flex;
				flex-direction: column;
				align-items: center;

				.tag {
					width: 148rpx;
					border-radius: 10rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					margin-bottom: 20rpx;
					background-color: #2A6CAC;
				}
			}
		}

		// 信息数量页面样式
		.infoContainer {
			display: flex;
			padding: 20rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #C8C7CC;

			.infoItem {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.infoNum {
					font-size: 36rpx;
					font-weight: bold;
				}

				.infoName {
					font-size: 24rpx;
				}
			}

		}

		.jobContent {
			margin: 20rpx 0;

			.tags {
				margin: 0rpx 20rpx 20rpx 20rpx;
			}
		}

		.charts-box {
			margin: 20rpx 0;
		}

		.xdContent {
			margin: 40rpx 0;
		}
	}
</style>
